@charset "utf-8";
//公共样式
@import "common.scss";
//移动端布局框架搭建
html{
    height: 100%;
}
body{
    display: flex;
    height: 100%;
    flex-direction: column;
}
//声明变量,保存设计图宽度
$width:100%;
header{
    width:$width;
    height: 0.9rem;
    background:#0979f7;
}
main{
    overflow: hidden;
    flex: 1;
    background:#f2f3f5 ;
    >.main-content{
        min-height: 101%;
    }
}
footer{
    width:$width;
    height: 0.98rem;
    background: #ffffff;
    border-top: solid 1px #d7d6dc;
}
//头部布局开始
//header{
//  display: flex;
//  justify-content:space-between;
//  align-items: center;
//  color: white;
//  >h1{
//      font-size:0.35rem; 
//      flex: 1; 
//      text-align: center; 
//  }
//  >section{
//      width:1.74rem;
//      height:0.62rem;
//      position: relative;
//      margin-right:0.14rem ;
//      >a{
//          display: inline-block;
//          line-height: 0.62rem;
//          text-align: center;
//          font-size: 0.4rem;
//          position: absolute;
//          top: 0rem;
//          right: 0rem;
//          left: 0rem;
//          color:#83b6ef;
//          >span.iconfont{
//              font-size: 0.34rem;
//              color: white;
//          }
//      }
//      >p{
//          width:1.74rem;
//          height:0.62rem;
//          background:#086ddf;
//          border-radius: 0.31rem;
//          position: absolute;
//          top: 0rem;
//          right: 0rem;
//          left: 0rem;
//      }
//  }
//}

header{
    width: $width;
    height: 0.78rem;
    background: #0979F7;
    display: flex;
    padding:0.09rem 0.15rem 0 ;
    box-sizing: border-box;
    justify-content: space-between;
    >h1{
        font: 0.36rem/0.62rem "微软雅黑";
        color: white;
    }
    >div{
        width: 1.74rem;
        height: 0.62rem;
      &.h-right{
          background: #006ddf;
          border-radius: 0.31rem;
          color: white;
          font-size: 0.34rem;
          display: flex;
          justify-content: space-around;
          align-items: center;
          >span.iconfont{
              font-size: 0.34rem;
          }
      }  
    }
}


//主体布局开始
.banner{
    >img{
        width: $width;
        height:3.26rem ;
    }
}
nav{
    height:5.28rem;
    width: $width;
    background: white;
    margin-bottom:0.32rem ;
    >ul{
      height:3.77rem;
      width: $width; 
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center; 
         >li{
             width: 1.6rem;
             height:1.4rem;
             text-align: center;
            >a{
                >img{
                    width:0.95rem;
                    height: 1.1rem;
                }
                >p{
                    font-size: 0.24rem;
                }
            }
         }      
}
    >p{
       height: 1.5rem;
       width: $width;  
       display: flex;
      justify-content: center;
      >img{
          width:2.24rem;
          height:1.22rem;
          border: solid 1px #ededed;
          border-radius: 8%;
        &.img-2{
            margin: 0 0.15rem;
        }  
      }
    } 
}
//维修服务
section.weixiu{
    display: flex;
    height:3.87rem;
    width: $width;
    background: white;
    justify-content: center;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding:0.2rem ;
    margin-bottom:0.3rem ;
    >img{
        width:3.49rem;
        height:1.72rem;
    }
    >img:nth-child(1){
        margin: 0 0.05rem 0.05rem 0;
    }
    >img:nth-child(2){
        margin: 0 0 0.05rem 0;
    }
    >img:nth-child(3){
        margin: 0 0.05rem 0 0;
    }
}
//空调 电饭煲 吸尘器
section.kongtiao{
    width: $width;
    height:4.54rem;
    background: white;
    position: relative;
    margin-bottom: 0.3rem;
    >img{
        width: $width;
        height:3.23rem;       
    }
    >p{
        line-height:0.8rem;
        margin-left:0.29rem ;
        font-size: 0.24rem;
    }
    >strong{
        font-weight: normal;
        color: red;
        margin-left: 0.3rem;
        font-size: 0.26rem;
    }
    >span.iconfont{
        color:#1bb5f1 ;
        font-size: 0.26rem;
        position: absolute;
        right:0.3rem;
        bottom:0.29rem ;
    }
}
//精品单选
section.jingpin{
    height: 1rem;
    width: $width;
    background: white;
    text-align: center;
    line-height: 1rem;
    color: #1BB5F1;
    font-size:0.3rem ;
    border-bottom: solid 1px #d7d6dc;
    >p span.iconfont{
        font-size:0.3rem ;
    }    
}
section.jingping-content{
    width: $width;
    height:16.5rem ;
    background: white;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding: 0.26rem 0.24rem;
    justify-content: space-between;
    align-content: space-between;
    >dl{
        width:3.4rem;
        height:5.1rem;
        border: solid 1px #d7d6dc;
        position: relative;
        >dt {
         padding-left: 0.1rem;   
         border-bottom:solid 1px #d7d6dc;
            >img{
               width:3.3rem; 
               height:3.3rem;
            }
        }
        >dd{
            padding-left: 0.1rem;
            >h2{
               line-height:0.59rem;
               font-size:0.28rem;
               font-weight: normal;
            }
            >h3{
                line-height:0.32rem;
                color:#7f879c ;
                font-size:0.22rem ;
                font-weight: normal;
            }
            >p{
                line-height:0.86rem;
                font-size:0.26rem ;
            }
            >span{
                color: #1BB5F1;
                font-size:0.3rem ;
                position: absolute;
                right:0.2rem;
                bottom: 0.3rem;
            }
        }
    }
}
//尾部布局开始
footer{
    >ul{
        height: 0.98rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
        color:#808799;
        font-size:0.22rem ;
        >li{
            text-align: center;
            >span.iconfont{
                font-size:0.36rem;
                color:#acacac ;
            }
            &.active{
                color: #1BB5F1;
                >span.iconfont{
                    color: #1BB5F1;
                }
            }
        }
    }
}
